<template>
	<div class="productList">
    <div class="productCateTitle">
      <div class="productCateTitleL">
        <i class="icon iconfont icon-liebiao"></i>
        品牌数据列表
      </div>
      <div class="productCateTitleR">
        <el-button @click="addBrand" type="primary">添加</el-button>
      </div>
    </div>
    <div class="productCateBody">
      <el-table :data="ProductBrandList" border style="width: 100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" label="" width="90%">
					<!-- <template slot-scope="scope">
            <el-checkbox-group v-model="checkedCities" >
							<el-checkbox :label="scope.row.id">
								<span></span></el-checkbox>
						</el-checkbox-group>
          </template> -->
				</el-table-column>
        <el-table-column prop="id" label="编号"> </el-table-column>
        <el-table-column prop="name" label="品牌名称"></el-table-column>
        <el-table-column prop="first_letter" label="品牌首字母"></el-table-column>
        <el-table-column prop="sort" label="排序">
        </el-table-column>
				<el-table-column label="品牌制造商">
          <template slot-scope="scope">
            <el-switch
              :value ="scope.row.factory_status|show_statusStr"
              active-color="#409eff"
              inactive-color="#dcdfe6"
            >
            </el-switch>
          </template>
        </el-table-column>
				<el-table-column label="是否显示">
          <template slot-scope="scope">
            <el-switch
              :value ="scope.row.show_status|show_statusStr"
              active-color="#409eff"
              inactive-color="#dcdfe6"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="tableBtn">
              <el-button @click="updataBrand(scope.row.id)" class="updata" type="primary">编辑</el-button>
              <el-button class="delete" type="danger">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
		<div class="block">
        <el-pagination
          :current-page="listQuery.pageNum"
          @current-change="handleCurrentChange"
          layout="total,sizes,prev, pager, next"
					:page-sizes="[5,10,15,20]"
          :page-size="listQuery.pageSize"
					@size-change="handleSizeChange"
          :total="total"
        >
        </el-pagination>
      </div>
  </div>
</template>

<script>
import { fetchProductBrandListPage } from "@/api/product";

export default {
	name:"productAttr",
	data () {
		return {
			ProductBrandList:[],
			listQuery:{
				pageNum:1,
				pageSize:5,
			},
			total:0,
			checkedCities:[]
		}
	},
	mounted () {
		this.getProductBrandList()
	},
	methods: {
		async getProductBrandList(){
			let res = await fetchProductBrandListPage(this.listQuery)
			this.ProductBrandList = res.data
			this.total = res.total
		},
		handleCurrentChange:function(val){
			this.listQuery.pageNum= val
			this.getProductBrandList()
		},
		handleSizeChange:function(val){
			this.listQuery.pageSize = val
			this.getProductBrandList()
		},
		//多选框的选中后调用方法 参数是选中行的具体对象 多个则为数组
		handleSelectionChange:function(val){
			console.log(val);
		},
		addBrand:function(){
			this.$router.push({name:"Brandadd"})
		},
		updataBrand:function(brandid){
			this.$router.push({name:"updataBrand",params:{"id":brandid}})
		}
	},
	filters: {
		show_statusStr:function(val){
			if(val===0){
				return false;
			}else{
				return true
			}
		}
	}
}
</script>

<style>
.productCateTitle {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid #ebeef5;
}

.productCateTitleR > button {
  width: 64px;
  height: 24px;
  padding: 0;
}

.productCateTitleR button:first-child{
	width: 90px;
	height: 24px;
	padding: 0;
}

.tableBtn {
  display: flex;
}

.updata,
.delete {
  width: 56px;
  height: 28px;
  padding: 0;
  color: #fff;
}

.down{
	width: 80px;
	height: 28px;
	padding: 0;
}

.el-table td, .el-table th{
	text-align: center;
}
</style>